<div class="container">
<div  class="row">
	<div  class="col-md-9">
		<portlet portlet="notitle">
		<style>
	#param-tb {
	    border: 1px solid #C5D7ED;
	    border-collapse: collapse;
	    color: #333333;
	    margin: 0 -1px;
	}
	#param-tb th, #param-tb td {
	    border: 1px solid #C5D7ED;
	    line-height: 28px;
	    padding: 0 15px;
	}
	#param-tb .val{
		width:390px;
	}
	#param-tb .val span {
	    display: block;
	    line-height: 28px;
	}
	.pagination > li > a, .pagination > li > span {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    color: #2fa4e7;}
		.pagination > li > a.active{background-color: #18bc9c; border: 1px solid transparent; color: #ffffff;}
	</style>

	    <!-- <div class="Content-info">
	   {{__('Pageview')}} <span class="ui-stats-num" id="Stats-Role-{{$Role['Role']['id']}}-view_nums"><?php echo $Role['Role']['view_nums']; ?></span>
	    </div> -->
	    <div class="clearfix">
		    <div id="product-info">
			    <h2 class="Content-title" style="text-align: center;"><?php echo $Role['Role']['name']; ?></h2>
			    
					<div class="row"  style="line-height:46px;">
							<div class="col-xs-3 text-right"><strong class="des-title">{{__('Price')}}：</strong></div>
							<div class="col-xs-9">
								<span id="product-price" class="product-price">{{format_price($Role['Role']['price'])}}</span>
							</div>
					</div>
					<div class=" hidden">
						<strong class="des-title">{{__('Quality')}}:</strong> 
						<div class="input-group" style="width:120px;">
						  <span class="reduce input-group-addon" onclick="setAmount.reduce('#pamount')">-</span>
						  <input id="pamount" size="3" value="1" class="form-control" name="shoppingnum" type="text">
						  <span class="add input-group-addon" onclick="setAmount.add('#pamount')">+</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-3 text-right" style="line-height:46px;"><strong class="des-title">购买时长：</strong></div>
						<nav class="col-xs-9">
						  <ul class="pagination">
						    <li><a class="active" href="javascript:void(0)" data-val="1">1</a></li>
						    <li><a href="javascript:void(0)" data-val="2">2</a></li>
						    <li><a href="javascript:void(0)" data-val="3">3</a></li>
						    <li><a href="javascript:void(0)" data-val="4">4</a></li>
						    <li><a href="javascript:void(0)" data-val="5">5</a></li>
						    <li><a href="javascript:void(0)" data-val="6">6</a></li>
						    <li><a href="javascript:void(0)" data-val="7">7</a></li>
						    <li><a href="javascript:void(0)" data-val="8">8</a></li>
						    <li><a href="javascript:void(0)" data-val="9">9</a></li>
						    <li><a href="javascript:void(0)" data-val="12">1年</a></li>
						    <li><a href="javascript:void(0)" data-val="36">3年</a></li>
						    <li><a href="javascript:void(0)" data-val="60">5年</a></li>
						  </ul>
						</nav>
					</div>
					<fieldset data-id="5" style="border: 0px none; padding: 0px; box-sizing: border-box; margin: 0px; font-size: 14px; font-family: 微软雅黑;" class="135editor">
						<blockquote class="135brush" style="white-space: normal; font-size: 14px; line-height: 25px; margin: 2px 0px; padding: 10px; border: 2px dashed rgb(222, 220, 222); max-width: 100%; box-sizing: border-box;">
							<p style="box-sizing: border-box; padding: 0px; margin: 0px;"><strong>提示：</strong>1年优惠2月</p>
						</blockquote>
					</fieldset>
		    </div>
		    <div class="text-right">
						<!-- <a aria-disabled="false" class="btn btn-primary mr10 mt10"
		 onclick="return addtoCart({{$Role['Role']['id']}},$('#pamount').val(),'Role');" href="javascript:void(0)">{{__('Add to Cart')}}</a> -->
		 				<a aria-disabled="false" class="btn btn-warning mr10 mt10"
		 onclick="return directBuy({{$Role['Role']['id']}},$('#pamount').val(),'Role');" href="javascript:void(0)">{{__('Buy Directly')}}</a>
		 	</div>
	    </div>
	    <hr/>
		<div class="tabs">
		
			<div id="product-description">
				    <div class="Content-body">
			        <div class="clear"></div>
				    <?php echo $Role['Role']['content']; ?>
				    </div>
			</div>
		</div>
		<br/>
			
		</portlet>	
	</div>
<script>
$(function(){
	var price = {{$Role['Role']['price']}};
	$('.pagination a').click(function(){
		$('.pagination a').removeClass('active');
		$(this).addClass('active');
		var num = $(this).data('val');
		$('#pamount').val(num);
		$('#product-price').html(price * 10* parseInt(num/12) + price*(num%12) );
	})
})
</script>
	
</div>
</div>